<template>
	<view class="page" :class="{minH: title}">
		<status-bar v-if='title' ref='statusbar' :title='title' back='0' search='1'></status-bar>
		<status-bar v-else :title='storeName+"列表"'></status-bar>
		<backTop v-if='toTop'></backTop>
		<template v-if='onceLevel && onceLevel.length > 0'>
			<view class="leftBar" :style="{'top':navHeight+System.statusBarHeight+'px'}">
				<view class="ltItem flex-box align-center" @click="tabs(item.bussId,item.bussName)" :class="{active:item.bussId == currBussId}" v-for="(item,index) in onceLevel" :key='index'>
					<text class="thmeBg leftLine"></text>
					<text class="flex lines2 txt">{{item.bussName}}</text>
				</view>
			</view>
			<view class="rightContent flex">
				<view class="right-tab flex-box align-center" :style="{'top':navHeight+System.statusBarHeight+'px'}">
					<view :class="{active: tab == 1}" :style="{'--color': color}" @click="tabCheck(1,'distance')">附近</view>
					<view :class="{active: tab == 2}" :style="{'--color': color}" @click="tabCheck(2,'sort_type')">好评</view>
					<view :class="{active: tab == 3}" :style="{'--color': color}" @click="tabCheck(3,'sales')">销量</view>
					
					<text :style="{
						'--color': color,
						left: 16.67*(2*tab - 1)+'%'
						}"></text>
				</view>
				<template v-if='storeList.length > 0'>
					<view @click="toStore(item)" class="storeItem flex-box align-center" v-for="(item,index) in storeList" :key='index'>
						<image class="storeLogo" :src="item.logo?$imgUrls(item.logo):staticUrl+'/images/imageLoading.png'" mode="aspectFill"></image>
						<view class="flex storemsg">
							<view class="lines storeTitle">{{item.name}}</view>
							<view class="lines storeType">经营类别：{{currBussTxt}}</view>
							<view class="lines storeType">{{item.address}}</view>
						</view>
					</view>
					<view class="DiLine" v-if='showDiLine'> ------ 我也是有底线的 ------</view>
				</template>
				<empty type='1' v-if='noData' cat='4' :msg='currBussTxt+"下还没有相关"+storeName+"哦~"'></empty>
			</view>
		</template>
		<empty type='1' v-if='noData && !onceLevel' cat='4' :msg='msg'></empty>
	</view>
</template>

<script>
	var that;
	import {mapState} from 'vuex';
	export default {
		props:['title'],
		data() {
			return {
				toTop: false,
				
				searchVal: '请输入搜索信息',
				staticUrl: this.staticUrl,
				currBussId: '',
				currBussTxt:'',
				bid: uni.getStorageSync('bid'),
				storeList: [],
				onceLevel: '',
				sort_type:'favorable', //favorable 好评  sales 销量  distance 距离
				page:1,
				more:false,// 是否加载更多
				noData:false,
				msg:'',
				showDiLine: false,
				storeName: uni.getStorageSync('startUp').nameDefinition.storeDefinitionName,
				tab: 1
			}
		},
		mounted() {
			that = this
			
		},
		onLoad() {
			that = this
			that.topCategory();
			that.storeName = that.storeName?that.storeName:"店铺"
			uni.setNavigationBarTitle({
				title: that.storeName+'列表'
			})
		},
		onReachBottom() {
			if(that.more){
				that.goodsType();
			}
		},
		onShareAppMessage(option) {
			let shareData = uni.getStorageSync('shareData');
			let vid = uni.getStorageSync('vid');
			return {
				title: shareData.title,
				desc: shareData.desc,
				path: '/pages/index/index?share_v_id=' + vid,
				imageUrl: shareData.imageUrl
			}
		},
		computed:{
			...mapState(['tabTitle','color','city','navHeight','System','share']),
		},
		methods: {
			tabCheck(i,sort_type){
				that.tab = i
				that.sort_type = sort_type
				that.page = 1
				that.storeList = []
				that.goodsType()
			},
			makephone(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			tabs(id,txt){
				if(that.currBussId != id){
					that.storeList = [];
					that.currBussId = id;
					that.page = 1;
					that.currBussTxt = txt;
					// uni.showLoading({
					// 	title:'加载中'
					// })
					that.goodsType();
				}
			},
			toStore(item){
				uni.setStorageSync('newStroe',item)
				this.back();
			},
			topCategory: function() {
				that.$http.post({
					url: '/singleSaleApi/shopCateList',
					data: {
						bid: that.bid
					}
				}).then(res => {
					if (res.errcode == 100 && res.data) {
						that.onceLevel = res.data;
						if(!that.currBussId){
							that.currBussId = that.onceLevel[0].bussId;
							that.currBussTxt = that.onceLevel[0].bussName;
						}
						that.goodsType();
					} else {
						that.noData = true
						that.msg = res.msg
					}
					
				})
			},
			goodsType: function() {
				that.more = false
				that.showDiLine = false
				that.noData = false
				that.$http.post({
					url: '/singleSaleApi/shopList',
					data: {
						bussId: that.currBussId,
						page: that.page,
						pageNum: 10,
						bid: that.bid,
						sort_type: that.sort_type
					}
				}).then(res => {
					if (res.errcode == 100 && res.data) {
						that.storeList = that.storeList.concat(res.data);
						if(res.data.length > 9){
							that.page ++;
							that.more = true
						}
					}
					if(that.storeList.length > 0 && (!res.data || res.data.length < 10)){
						that.showDiLine = true
					}
					if(that.storeList.length < 1){
						that.noData = true
					}
					// uni.hideLoading()
				})
				
			},
			goodsShow: function(hello) {
				uni.showToast({
					title:hello,
					icon:'none'
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 300) {
				that.toTop = true;
			} else {
				that.toTop = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #FFFFFF;
		&.minH{
			min-height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
		}
	}
	.leftBar{
		width: 150rpx;
		background: #f5f5f5;
		position: fixed;
		left: 0;
		top: 0;
		overflow-y: auto;
		bottom: 0;
		z-index: 22;
	}
	.rightContent{
		padding: 88rpx 20rpx 10rpx;
		margin-left: 150rpx;
		.right-tab{
			position: fixed;
			height: 100rpx;
			left: 150rpx;
			right: 0;
			background-color: #FFFFFF;
			z-index: 2;
			justify-content: space-around;
			box-shadow: 0 0 12rpx 1px #F5F5F5;
			view{
				&.active{
					font-size: 28rpx;
					font-weight: bold;
					color: var(--color);
				}
			}
			text{
				width: 40rpx;
				height: 6rpx;
				border-radius: 6rpx;
				position: absolute;
				bottom: 0;
				background-color: var(--color);
				left: 16.67%;
				margin-left: -20rpx;
				transition:  left 0.2s;
			}
		}
	}
	.leftLine{width: 8rpx;height: 30rpx;}
	.ltItem{height: 100rpx;}
	.ltItem.active{
		background-color: #FFFFFF;
		.txt{
			font-weight: bold;
		}
	}
	.ltItem .txt{text-align: center;padding: 0 10rpx 0 6rpx;}
	.storeItem{padding: 30rpx 0 30rpx 20rpx;background-color: #FFFFFF;border-bottom: 2rpx solid #F5F5F5;}
	.storeTitle{font-size: 26rpx;color: #222222;margin-bottom: 16rpx;}
	.storeType{
		color: #999;margin-top: 4rpx;
		text{color: #999;}
		.icon-dianhua{
			font-size: 34rpx;
			margin-right: 10rpx;
		}
		.tel{
			font-size: 28rpx;
		}
	}
	.storeLogo{border-radius: 50%;width: 140rpx;height: 140rpx;margin-right: 30rpx;}.icons{padding-left: 30rpx;text-align: center;}
	.Search-ico{width: 40rpx;height: 40rpx;margin-right: 10rpx;}.fenlei-ico{width: 42rpx;height: 36rpx;}
</style>
